import Vue from 'vue'
import vuex from 'vuex'

Vue.use(vuex)
/*
    在真实的开发过程中，我们不可能只使用一个store存储项目中所有的数据。举个例子，我们都用过淘宝，那么难道现在让你开发一个仿淘宝软件，你把商品、用户信息、订单信息等等全都放到一个store中吗？那不是乱了套了吗？所以vue的开发者自然也想到了这些，我们可以分出模块来，然后再按照模块去给各个模块写actions、mutations等。
*/

// 求和模块的store
const countDemo = {
    namespaced:true,
    state:{
        sum:0
    },
    actions:{
        jiaWait(context,num){
            setTimeout(() => {
                context.commit('JIA',num)
            }, 300);
        }
    },
    mutations:{
        JIA(state,num){
            state.sum+=num
        }
    },
    getters:{
        bigSum(state){
            return state.sum*10
        }
    }
}

// 人员列表模块
const personDemo = {
    namespaced:true,
    state:{
        personList:[{
            name:'张三',
            id:1
        }]
    },
    mutations:{
        ADD(state,p){
            state.personList.push(p)
        }
    }
}

// 当我们使用了模块化的store，就要在导出的vuex.Store里的参数写成modules对象，modules对象里写的是我们在上面定义的所有的模块
export default new vuex.Store({
    modules:{
        countDemo,
        personDemo
    }
})